<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>

<c:set var="ctx" value="${pageContext.request.contextPath}" />
<!DOCTYPE html>
<html>
<head>
<jsp:include page="${ctx}/css_inc"></jsp:include> 
<meta http-equiv="X-UA-Compatible" content="edge" /> 

<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>红黑榜展示</title>
</head>
<body class="gray-bg">
	<div class="wrapper wrapper-content animated fadeInRight">
		<div class="row">
			<div class="col-sm-12">
				<div class="ibox float-e-margins">
					<div class="ibox-title">
						<h5>红黑名单</h5>
					</div>
					<div class="ibox-content">
					 	<div class="row">
							<div class="col-lg-12">
								<form role="form" class="form-inline">

									<div class="form-group">
										<div class="input-group">
											<span class="input-group-addon">手机号码</span> 
											<input type="text" id="billId" class="form-control" name="billId">
										</div>
									</div>
									<div class="form-group">
										<select class="form-control" id="type">
											<option value="">请选择名单类型</option>
											<option value="1" >红名单</option>
											<option value="2">黑名单</option>
										</select>
									</div>
									<button id="queryBtn" class="btn btn-primary" type="button">
										<i class="fa fa-search"></i>&nbsp;搜索
									</button>
								</form>
							</div>
						</div>
					 	
					 	<div class="hr-line-dashed"></div>
							<div> 
								<div>
									<button id="btnAdd" class="btn  btn-white " type="button">
										<i class="fa fa-plus"></i>&nbsp;添加
									</button>
									<button id="btnDel" class="btn  btn-white " type="button">
										<i class="fa fa-trash-o"></i>&nbsp;删除
									</button>
								</div>
								<table id="redBlackListTable" data-height="452" data-mobile-responsive="true">
								</table>
							</div>
					   </div>
				   </div>
				</div>
		  </div>
	</div>
	<jsp:include page="${ctx}/js_inc"></jsp:include>
	
	<script type="text/javascript">
	
 
		var typeData = {
			1 : '红名单',
			2 : '黑名单'
		}; 
		/* 添加名单 */
		var layerIndex;
		$('#btnAdd').click(
				function() {
					layerIndex = layer.open({
						type : 2,
						title : '触点分类新增',
						btn : [ '确认', '关闭' ],
						yes : function() {
							var ifnameName = 'layui-layer-iframe' + layerIndex;
							var iFrame = window.frames[ifnameName].document;
							var object = $.serializeObject($('#redblackListForm', iFrame));  
							var rtn = window.frames[ifnameName].$('#redblackListForm').validate().form();
							$.ajax({
					            url : '${ctx}/contactmgn/redblack/saveRedBlackList',
					            type : 'POST',
					            data : object, 
					            dataType: 'json',
					            success : function(result) {
					            	/*关闭窗口  */
					                layer.close(layerIndex);
					                if (result.success) {
					                	swal('保存成功！', '', 'success');
					                	$('#redBlackListTable').bootstrapTable('refresh');
					                } else {
					                	 swal('保存失败！', result.msg, 'warning');
					                }
					            }
					    	});
							
						},
						shadeClose : true,
						area : [ '800px',
								(document.body.clientHeight - 100) + 'px' ],
						content : '${ctx}/contactmgn/redblack/redblack'
					});
				});

		/*点击删除按钮  */
		$('#btnDel').click(
				function() {
					var selected = $('#redBlackListTable').bootstrapTable('getSelections');
					var jso = JSON.stringify(selected[0]);
		            var object = {
		            		id : selected[0].id
		            };
		            swal({
				        title: '您确定要删除这条信息吗?',
				        text: '删除后将无法恢复，请谨慎操作！',
				        type: 'warning',
				        showCancelButton: true,
				        confirmButtonColor: '#ed5565', 
				        closeOnConfirm: false
				    }, function () {
				    	$.ajax({
				            url : '${ctx}/contactmgn/redblack/delRedBlackList',
				            type : 'POST',
				            data : object, 
				            dataType: 'json',
				            success : function(result) {
				            	if(result.success){
			    					 swal('删除成功！', '您已经永久删除了这条信息。', 'success');
			    					 $('#redBlackListTable').bootstrapTable('refresh');
			    				}else{
			    					 swal('删除失败！', data.msg, 'warning');
			    				}
				            }
				     	}); 
				    });
		            
		            
				});
		
		/*点击查询按钮  */
		$('#queryBtn').click(
				function() {
					$('#redBlackListTable').bootstrapTable('showLoading') 
							.bootstrapTable('refresh');
				});
		
		$('#redBlackListTable').bootstrapTable({
			columns : [ { 
				field :'checkField',
				checkbox : true,
				halign : 'center', 
				align : 'center'

			},  {
				field : 'state',
				title : '当前状态',
				halign : 'center', 
				align : 'center',
				formatter : function(value, row,index) { 
					var html;
					switch (value) {
					case 1:
						html = '<span class="label label-primary">有&nbsp;效';
						break;
					case 0:
						html = '<span class="label label-danger">失&nbsp;效';
						break;
					default:
						html = '';
					}
						return html;
				}
			},
			
			{
				field : 'id',
				title : '名单ID',
				sortable : true,
				halign : 'center', 
				align : 'center',
				visible : false /* 隐藏列 */
			}, {
				field : 'billId',
				title : '手机号码' ,
					halign : 'center', 
					align : 'center'
			},  {
				field : 'type',
				title : '名单类型',
				halign : 'center', 
				align : 'center',
				formatter : function(value, row,index) {
					return valueFormat(value,typeData); 
				}
			},
			{
				field : 'operate',
				title : '操作',
				width : '150px',
				halign : 'center', 
				align : 'center',
				formatter : function(value, row, index) {
					var html = '<a href="javascript:;" onclick="del('+row.id+')" title="删除"><i class="fa fa-trash-o text-danger"></i></a>'; 
					return html;
				}
			} ],
			classes :'table table-hover',  
			uniqueId :'id',  
			idField :'id',  
			sortName : 'id', 
			sortOrder : 'asc',
			pagination : true,  
			sidePagination : 'server', 
			clickToSelect : true, 
			pageNumber : 1, 
			pageSize : 10,
			pageList : [  10, 20 ],
			queryParamsType : '',
			queryParams : function(params) {
				console.info(params);
 				return { 
 					keyWord : $('#keyWord').val(), 
 					billId : $('#billId').val(),
 					type :  $('#type').val(), 
 					createdate : $('#createdate').val(),
 					pageNumber : params.pageNumber, 
					pageSize : params.pageSize, 
					sort : params.sortName,
					order : params.sortOrder	
				}
			},
			url : '${ctx}/contactmgn/redblack/queryRedBlackList' 
		});
		
		function del(id){
			   swal({
			        title: '您确定要删除这条信息吗?',
			        text: '删除后将无法恢复，请谨慎操作！',
			        type: 'warning',
			        showCancelButton: true,
			        confirmButtonColor: '#ed5565', 
			        closeOnConfirm: false
			    }, function () {
			    	$.post('${ctx}/contactmgn/redblack/delRedBlackList', { id: id }, 
			    			function (data) { 
			    				if(data.success){
			    					 swal('删除成功！', '您已经永久删除了这条信息。', 'success');
			    					 $('#redBlackListTable').bootstrapTable('refresh');
			    				}else{
			    					 swal('删除失败！', data.msg, 'warning');
			    				}
			    			}
			    	); 
			    });
		}
	</script>
</body>

</html>
